<script setup>
import { ref, onMounted } from 'vue';
import { guzhangUnitcountApi } from '@T2/service/api.ts';
import * as echarts from 'echarts';
import dayjs from 'dayjs';

const props = defineProps({
  unit: {
    type: Array,
    required: true,
  }
});

const onlyRef = ref(null);
let myChart = null;
onMounted(() => {
  myChart = echarts.init(onlyRef.value);
  option.series = {};
  loadUnitsData();
});

const getGuzhangUnitcount = () => {
  return new Promise((resolve, reject) => {
    guzhangUnitcountApi({
      method: 'get',
      params: {
        create_time__range: dayjs().format('YYYY-MM') + '-01 00:00:00,' +  dayjs().format('YYYY-MM-DD HH:mm:ss'),
      }
    }).then(res => {
      resolve(res || []);
    }).catch(err => {
      reject(err);
    })
  })
}
const loadUnitsData = async () => {
  const guzhangUnitcount = await getGuzhangUnitcount();
  const warns = props.unit.map((unit, index) => {
    return { unitName: unit.name, nums: guzhangUnitcount.find(i => i.unit_id === unit.id)?.count || 0 };
  }).sort(function (a, b) { return b.nums - a.nums }).slice(0, 5);
  // const warns = [
  //   { unitName: '站点1', nums: 82 },
  //   { unitName: '站点2', nums: 65 },
  // ];
  let datas = warns.reverse().map(i => [i.nums, i.unitName]);
  option.yAxis.name = '';
  option.series = {
    type: 'bar',
    data: datas,
    barWidth: 16,
    itemStyle: {
      color: new echarts.graphic.LinearGradient(1,0,0,0, [{offset: 0, color: '#006AFF'}, {offset: 1, color: 'rgba(0,106,255,0.1)'}]),
    },
  };
  myChart.setOption(option);
}
const option = {
  animation: true,										  	  //是否开启动画
  backgroundColor: 'rgba(0, 18, 24, 0)',    //无背景颜色
  series: {},                               //系列
  tooltip: {
    trigger: 'axis',                        //axis坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
    formatter: function (params) {
      const { name, value } = params[0];
      return `
        <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background-color:#006AFF;margin-right:5px;"></span>
        ${name}
        <span style="display:inline-block;width:10px;"></span>
        ${value[0]}
      `;
    }
  },
  grid: {
    containLabel: true,                 //为true表示外边 距离 包含刻度标签在内的整个图表
    bottom: 30,                         //网格离容器底部距离
    right: 30,                          //网格离容器右侧距离
    left: 30,                           //网格离容器左侧距离
    top: 30,                            //网格离容器顶部距离
  },
  yAxis: {
    type: 'category',                     //时间轴
    axisLine: {
      lineStyle: {
        width: 1,
        color: 'rgba(24,24,24,0.25)',
      }
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      color: 'rgba(0,0,0,0.6)',
      fontSize: 12,
      fontFamily: 'Helvetica',
    },
  },
  xAxis: {
    type: 'value',
    splitLine: {
      lineStyle: {
        color: 'rgba(24,24,24,0.1)',
      }
    },
    axisLabel: {
      color: 'rgba(0,0,0,0.4)',
      fontFamily: 'Helvetica',
      fontSize: 12,
    },
    nameTextStyle: {
      color: 'rgba(0,0,0,0.4)',           //坐标轴名称字体颜色
      fontSize: 12,                       //坐标轴名称字体大小
    },
  },
}
</script>

<template>
  <div ref="onlyRef" />
</template>

<style lang="scss" scoped>
div {
  width: 100%;
  height: 100%;
}
</style>